<template>
  <view class="score-wrap">
		<view class="score">
			<header-title :title="headerTitle"></header-title>
			<view class="qiun-charts2" >
				<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts2" @touchstart="touchLineA"></canvas>
			</view>
		</view>
  </view>
</template>

<script>
	import headerTitle from './header'
	import uCharts from '../../../components/u-charts/u-charts/u-charts'
	import {gradeRequest} from '../../../api/charts'
	
	let canvaLineA = null
	let _self
	export default {
		name: 'scroe',
		data() {
			return {
				headerTitle: '综合成绩分析',
				cWidth:'',
				cHeight:'',
				pixelRatio:1,
				lineData: {
					categories: ['1月', '2月', '3月', '4月', '5月', '6月','7月', '8月', '9月', '10月', '11月', '12月'],
					series: [{
						name: '成绩',
						data: [],
						color: '#0D84D5'
					},
					{
						name: '平均分',
						data: [],
						color: '#FB6E6E'
					}],
				}
			}
		},
		components: {
			headerTitle
		},
		created() {
			_self = this;
			this.cWidth=uni.upx2px(710);
			this.cHeight=uni.upx2px(450);
			this.getLineData()
		},
		methods:{
			async getLineData() {
				uni.showLoading({
					title: '加载中'
				})
				const res = await gradeRequest()
				uni.hideLoading()
				const {score,avg}  = res
				this.lineData.series[0].data = score
				this.lineData.series[1].data = avg
				_self.showLineA('canvasLineA', this.lineData)
			},
			showLineA(canvasId,chartData){
				canvaLineA=new uCharts({
					$this:_self,
					canvasId: canvasId,
					type: 'line',
					fontSize:11,
					legend:true,
					dataLabel:false,
					dataPointShape:true,
					background:'#FFFFFF',
					pixelRatio:_self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					xAxis: {
						type:'grid',
						gridColor:'#0D84D5',
						gridType:'dash',
						fontColor: '#0D84D5',
						// dashLength:8
					},
					yAxis: {
						gridType:'dash',
						title: '截至2018年9月',
						gridColor:'#0D84D5',
						fontColor: '#0D84D5',
						titleFontColor: '#0D84D5',
						splitNumber: 5,
						min:60,
						max:100,
						format:(val)=>{return `${Number(val)}分`}
					},
					width: _self.cWidth*_self.pixelRatio,
					height: _self.cHeight*_self.pixelRatio,
					extra: {
						line:{
							type: 'straight'
						}
					}
				});
			},
			touchLineA(e) {
				canvaLineA.showToolTip(e, {
					format: function (item, category) {
						return category + ' ' + item.name + ':' + item.data 
					}
				});
			}
		}
	}

</script>
<style lang='scss' scoped>
.score-wrap{
  width: 100%;
	padding: 20upx;
	box-sizing: border-box;
	background-color: #f0f0f0;
	.score{
		height:514upx;
		background:rgba(255,255,255,1);
		border-radius:10px;
	}
}
.qiun-charts2{
	width: 100%;
	height: 450upx;
	background: #fff;
}
.charts2{
	width: 710upx;
	height: 450upx;
	background-color: #fff;
}
</style>